<template>
  <div>
    <div class="game_comment_box">
      <div class="comment_title">
        <img src="../../../assets/img/detail/ic_game_comment.png" alt="" />
        <span>游戏点评</span>
      </div>
      <div class="game-comment">
        <!-- <div class="comment-title">
          <div class="game-comment-title">玩家评论</div>
          <div class="game-comment-list">
            {{ gameinfo.comment_count }}条评论
          </div>
        </div> -->
        <div
          class="play-comment"
          v-for="(item, index) in commentlist"
          :key="index"
          v-show="gameinfo.comment_count != 0">
          
          <!-- 上 -->
          <div class="comment-box">
            <!-- 左 -->
            <div class="user-icon">
              <div v-if="item.community_info.user_icon" class="user-icon-item">
                <img :src="item.community_info.user_icon" alt=""/>
              </div>
              <div v-else class="user-icon-item">
                <img src="../../../assets/img/detail/bt_head_color.png" alt=""/>
              </div>
            </div>
            <!-- 右 -->
            <div>
              <div class="comment-info-reward">
                <div>
                  <!-- 用户名图标 -->
                  <div class="comment-user-info">
                    <div
                      :class="[
                        item.community_info.vip_level > 0
                          ? 'comment-vip'
                          : 'comment-infoname',
                      ]"
                    >
                      {{ item.community_info.user_nickname }}
                    </div>
                    <!-- 等级icon -->
                    <div
                      v-if="item.community_info.vip_level > 0"
                      class="comment-user-info-icon"
                    >
                      <img src="../../../assets/img/detail/member.png" alt="" />
                    </div>
                    <div class="comment-info-user-level">
                      <img
                        src="../../../assets/img/detail/img_user_level_1.png"
                        alt=""
                        v-if="item.community_info.user_level <= 0"
                      />
                      <img
                        src="../../../assets/img/detail/img_user_level_2.png"
                        alt=""
                        v-else-if="item.community_info.user_level <= 30"
                      />
                      <img
                        src="../../../assets/img/detail/img_user_level_3.png"
                        alt=""
                        v-else-if="item.community_info.user_level <= 60"
                      />
                      <span>{{ item.community_info.user_level }}</span>
                    </div>
                  </div>
                  <!-- 评论时间 -->
                  <div class="comment-timer">
                    {{ item.release_time | timer }}
                  </div>
                </div>
                <div class="reward_integral_box">
                  <div class="reward_integral" v-if="item.reward_integral != 0" @click="reviewActivities">
                    积分+{{item.reward_integral}}
                  </div>
                  <div class="reward_integral_text" v-if="item.reward_integral != 0">优</div>
                </div>
              </div>
              <!-- 评论内容 -->
              <div class="comment-content">{{ item.content }}</div>
              <!-- 评论图片 -->
              <ul v-if="item.pics != null" class="comment-pics">
                <li v-for="(pic, id) in item.pics" :key="id" @click="picsClick(index,id)">
                  <img :src="pic.high_pic_path" alt="">
                </li>
              </ul>
              <!-- 中 -->
              <div class="comment-reply-info" v-if="item.reply_count != 0">
                <div v-for="(reply, id) in item.reply_list" :key="id">
                  <span
                    :class="[
                      reply.community_info.vip_level <= 0
                        ? 'reply-info-name-b'
                        : 'reply-info-name-j',
                    ]"
                    >{{ reply.community_info.user_nickname }}:
                  </span>
                  <span>{{ reply.content }}</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 下 评论和点赞 -->
          <div class="comment-reply">
            <div class="reply-count" @click="replyCount(item.cid, index)">
              <div class="comment-reply-count">
                <img src="../../../assets/img/detail/ic_comment.png" alt="" />
                <div class="hidden">无</div>
              </div>
              <div class="reply-count-text">{{ item.reply_count }}</div>
            </div>
            <div class="like-count" @click="zanClick(item.cid, index)">
              <div class="comment-like-count">
                <img src="../../../assets/img/detail/ic_zan_active.png" alt="" v-if="item.me_like == 1">
                <img src="../../../assets/img/detail/ic_zan.png" alt="" v-else/>
                <div class="hidden">无</div>
              </div>
              <div class="like-count-text">{{ item.like_count }}</div>
            </div>
          </div>
        </div>
        <div v-show="gameinfo.comment_count != 0">
          <!-- <load-more :show="show"  @load-more="loadMore"/> -->
        </div>
        <div v-show="gameinfo.comment_count == 0">
          <img src="../../../assets/img/detail/jy_none1.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  props: {
    gameinfo: {
      type: Object,
      default() {
        return {};
      }
    },
    commentlist: {
      type: Array,
      default: null
    }
  },
  methods: {
    //点评活动
    reviewActivities() {
      this.$emit('review-activities')
    },
    //评论区放大图
    picsClick(index,id) {
      var image = []
      var arr = this.commentlist[index].pics
      if(Array.isArray(arr)) {
        arr.forEach(item => {
          for (let key in item) {
            if(key == 'pic_path') {
              image.push(item[key])
            }
          }
        })
      }
      ImagePreview({
        images: image,
        startPosition: id,
      })
    },
    //评论
    replyCount(cid, index) {
      this.$emit('reply-count',cid ,index)
    },
  },
  filters: {
    timer(item) {
      var time = new Date(item * 1000)
      var M = time.getMonth() + 1
      var D = time.getDate()
      var h = time.getHours()
      h = h < 10 ? '0' + h : h
      var m = time.getMinutes()
      m = m < 10 ? '0' + m : m
      return M + '月' + D + '日' + ' ' + h + ':' + m
    }
  }
};
</script>

<style lang="less" scoped>
.game_comment_box {
  box-sizing: border-box;
  width: 9.2rem;
  margin: 0 .4rem 2.666667rem;
  padding: .266667rem 0 0;
  height: auto;
  border-radius: .213333rem;
  font-size: .32rem;
}

.comment_title {
  padding: 0 .266667rem;
  font-size: 0.426667rem;
  font-weight: 700;
  color: #222222;
  line-height: 0.8rem;
}

.game_comment_box img {
  width: .346667rem;
  height: .346667rem;
  margin-right: 0.133333rem;
}

.game-comment {
  box-sizing: border-box;
  width: 9.2rem;
  height: auto;
  // padding: .266667rem .4rem .4rem;
  padding-bottom: env(safe-area-inset-bottom);
}

.comment-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .8rem;
}

.game-comment-title {
  font-size: .426667rem;
  font-weight: 700;
  color: #222222;
}

.game-comment-list {
  font-size: .32rem;
  font-weight: 400;
  color: #222222;
}

.play-comment {
  position: relative;
  box-sizing: border-box;
  width: 9.2rem;
  height: auto;
  padding: .4rem .453333rem 0;
  background: #ffffff;
  border-radius: .266667rem;
  margin-bottom: .213333rem;
}

.comment-info-reward {
  display: flex;
  height: .933333rem;
  align-items: center;
  justify-content: space-between;
}

.reward_integral_box {
  position: relative;
}

.reward_integral {
  width: 1.866667rem;
  height: .666667rem;
  border: .04rem solid #ff5543;
  border-radius: .2rem;
  text-indent: .466667rem;
  font-size: .32rem;
  line-height: .666667rem;
  color: #ff5543;
  display: inline-block;
}

.reward_integral_text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -0.173333rem;
  width: .466667rem;
  height: .466667rem;
  background: #ff5543;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: .466667rem;
  font-size: .373333rem;
}

.user-icon {
  width: .933333rem;
  height: .933333rem;
  border-radius: 50%;
  overflow: hidden;
}

.user-icon img {
  width: 100%;
  height: 100%;
}

.user-icon-item,
.user-icon-item img {
  width: .933333rem;
  height: .933333rem;
  border-radius: 50%;
  overflow: hidden;
}

.comment-box {
  display: flex;
}

.user-icon {
  margin-right: .16rem;
}

.comment-user-info {
  flex: 1;
  display: flex;
  align-items: center;
}

.comment-infoname {
  font-size: .373333rem;
  color: #333333;
}

.comment-vip {
  font-size: .373333rem;
  color: #cfb58a;
}

.comment-user-info-icon,
.comment-user-info-icon img {
  width: .373333rem;
  height: .413333rem;
}

.comment-user-info-icon {
  margin-left: .08rem;
}

.comment-info-user-level,
.comment-info-user-level img {
  width: 1.173333rem;
  height: .533333rem;
}

.comment-info-user-level {
  position: relative;
}

.comment-info-user-level span {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  font-size: .266667rem;
  font-weight: 700;
  color: #ffffff;
}

.comment-info-user-level img {
  margin-left: .133333rem;
}

.comment-content {
  width: 7.2rem;
  font-size: .346667rem;
  line-height: .426667rem;
  font-weight: 400;
  color: #333333;
  margin-top: .2rem;
}

.comment-pics {
  width: 6.933333rem;
  display: flex;
  flex-wrap: wrap;
}

.comment-pics li {
  box-sizing: border-box;
  padding: .133333rem;
  width: 2.266667rem;
  height: 2.266667rem;
}

.comment-pics img {
  width: 2rem;
  height: 2rem;
  border-radius: .133333rem;
  overflow: hidden;
}

.comment-timer {
  font-size: .32rem;
  color: #999999;
  margin-top: .08rem;
}

.comment-reply-info {
  box-sizing: border-box;
  padding: .266667rem;
  margin: .266667rem 0;
  width: 6.666667rem;
  background-color: #f1f1f1;
  border-radius: .08rem;
  font-size: .32rem;
  color: #333333;
  line-height: .453333rem;
}

.reply-info-name-b {
  color: #ff5543;
}

.reply-info-name-j {
  color: #cfb58a;
}

.comment-reply {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: .8rem;
}

.comment-reply-count,
.comment-like-count {
  display: flex;
  align-items: center;
  width: .32rem;
  height: .32rem;
  overflow: hidden;
}

.comment-reply-count img,
.comment-like-count img {
  width: .32rem;
  height: .32rem;
}

.reply-count,
.like-count {
  display: flex;
  align-items: center;
}

.like-count {
  margin-left: .573333rem;
}

.reply-count-text,
.like-count-text {
  font-size: .266667rem;
  color: #999999;
  margin-left: .106667rem;
}

</style>
